<template>
  <div id="login">
    <h1>登陆</h1>
    <van-form @submit="onSubmit">
  <van-field
    v-model="formData.username"
    placeholder="输入手机号"
    :rules="[{ required: true,  pattern:/^1[3-9]\d{9}$/,message: '请填写正确的手机号' }]"
  />
  <van-field
    v-model="formData.password"
    type="password"
    placeholder="密码"
    :rules="[{pattern:/^\d{4}$/, required: true, message: '请填写密码' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">提交</van-button>
  </div>
</van-form>
  </div>
</template>

<script>
import {user_login} from '@/utils/api';
import { Toast } from 'vant';
export default {
  data() {
    return {
        formData:{
            username: '',
            password: '',
        }
      
    };
  },
  methods: {
    onSubmit() {
        user_login( this.formData ).then((res)=>{
        if( res.data.code == 200 ){
          localStorage.setItem('token',res.data.token);
          localStorage.setItem('userinfo', JSON.stringify( res.data.userinfo ) );
          this.$router.push('/');
          Toast.success('登陆成功!')
        }else{
          Toast.fail('登陆失败!')
        }
      })
    },
  },
};
</script>

<style>
#login{
  margin: 50px 20px;
}
#login h1{
  font-weight: bold;
  text-align: center;
  line-height: 40px;
  margin-bottom: 50px;
}
#login .van-field{
  margin: 20px 0;
}
#login .van-field input{
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding-left: 20px;
  box-sizing: border-box;
  outline: none;
  width: 100%;
}
</style>